<template>
  <div class="app-container">
    <el-card class="box-card" shadow="never" v-show="pageReady">
      <div slot="header" class="clearfix">
        <span class="role-span">{{ opText }}计划</span>
        <div class="box-card-btn">
          <el-button type="success" @click="add" :loading="posting" v-if="editMode">修改</el-button>
          <el-button type="primary" @click="add" :loading="posting" v-else>
            创建
          </el-button>
        </div>
      </div>
      <el-form :model="npi" :rules="planRules" ref="planForm" label-width="100px">
        <el-divider content-position="left">计划信息</el-divider>
        <el-row :gutter="20">
          <el-col :span="24">
            <el-form-item prop="name" label="计划名称:">
              <el-input v-model="npi.name"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item prop="stock" label="所属品类:">
              <stock-tree v-model="npi.stock"></stock-tree>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item prop="detail.stockManager" label="品类经理:">
              <el-input v-model="npi.detail.stockManager"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item prop="detail.contactPhone" label="联系电话:">
              <el-input v-model="npi.detail.contactPhone"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item prop="detail.materialName" label="物料名称:">
              <el-input v-model="npi.detail.materialName"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item prop="detail.amount" label="物料数量:">
              <el-input v-model.number="npi.detail.amount"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item prop="detail.tax" label="税率:">
              <el-select v-model="npi.detail.tax">
                <el-option
                  v-for="item in TAX_RATE"
                  :key="item"
                  :value="item"
                  :label="item"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item prop="detail.model" label="规格型号:">
              <el-input v-model.number="npi.detail.model"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item prop="detail.configuration" label="配置:">
              <el-input v-model="npi.detail.configuration"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item prop="detail.unit" label="计量单位:">
              <el-select v-model="npi.detail.unit">
                <el-option
                  v-for="(unit, index) in dict.unit_list"
                  :key="index"
                  :label="unit.label"
                  :value="unit.label"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item prop="detail.projectNumber" label="项目编号:">
              <el-input v-model="npi.detail.projectNumber"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item prop="detail.deliveryDate" label="交货日期:">
              <el-date-picker
                v-model="npi.detail.deliveryDate"
                value-format="timestamp"
                style="width: 100%;"
              ></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item prop="detail.deliveryPoints" label="交货地点:">
              <el-input v-model.number="npi.detail.deliveryPoints"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item prop="detail.applySystem" label="应用系统:">
              <el-input v-model="npi.detail.applySystem"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item prop="detail.budget" label="预算:">
              <el-input v-model="npi.detail.budget"></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="6">
            <el-form-item prop="detail.proposer" label="申请人:">
              <el-input v-model="npi.detail.proposer"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item prop="detail.proposerPhone" label="申请人联系方式:" label-width="130px">
              <el-input v-model="npi.detail.proposerPhone"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item prop="detail.allocatedDepart" label="分摊部门:">
              <el-input v-model="npi.detail.allocatedDepart"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item prop="detail.proposerDept" label="申请人部门:">
              <el-input v-model="npi.detail.proposerDept"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item prop="detail.comment" label="备注:">
              <el-input
                v-model="npi.detail.comment"
                type="textarea"
                show-word-limit
                maxlength="200"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-card>
  </div>
</template>

<script>
  import FormRuleConf from '@/FormRuleConf';
  import StockTree from '@/components/StockTree';
  import * as PlanRequest from '@/api/plan';
  import { TAX_RATE } from '@/config';

  const DATA_TMP = {
    // 搜索项 start =====
    code: '', // 计划单号 创建之后系统生成
    name: '', // 计划名称
    stock: '', // 品类 来自品类结构树
    // 搜索项 end =====
    detail: {
      // stockManager: '', // 品类经理
      // materialName: '', // 物料名称
      // amount: '', // 数量
      // contactPhone: '', // 联系电话
      // budget: '', // 预算
      // proposer: '', // 申请人
      // proposerPhone: '', // 申请人联系方式
      // proposerDept: '', // 申请部门 考虑从系统部门里面获取
    },
  };

  export default {
    name: 'PlanProfile',
    components: { StockTree },
    dicts: ['unit_list'],
    data() {
      return {
        ...FormRuleConf.Plan,
        npi: { ...DATA_TMP },
        posting: false,
        pageReady: false,
        TAX_RATE,
      };
    },
    watch: {
      $route() {
        this.getPlanDetail();
      },
    },
    computed: {
      copyMode() {
        return this.$route.query.mode === 'copy';
      },
      editMode() {
        return this.npi.id && !this.copyMode;
      },
      opText() {
        return this.editMode ? '修改' : '新建';
      },
    },
    mounted() {
      this.getPlanDetail();
    },
    methods: {
      getPlanDetail() {
        if (this.$route.query.pid) {
          PlanRequest.getPlan({ id: this.$route.query.pid })
            .then((res) => {
              this.npi = {
                ...res,
                detail: JSON.parse(res.detail),
              };

              if (this.copyMode) {
                const { detail, name, stock } = res;
                this.npi = {
                  name,
                  stock,
                  detail: JSON.parse(detail),
                };
              } else {
                this.npi = {
                  ...res,
                  detail: JSON.parse(res.detail),
                };
              }
            })
            .finally(() => {
              this.pageReady = true;
            });
        } else {
          this.pageReady = true;
        }
      },
      add() {
        if (this.posting) return;
        this.$refs['planForm'].validate((valid) => {
          if (!valid) return;
          this.posting = true;

          let request = this.npi.code ? PlanRequest.editPlan : PlanRequest.addPlan;

          const body = {
            ...this.npi,
            detail: JSON.stringify(this.npi.detail),
          };

          request(body)
            .then((res) => {
              // this.$EventBus.$emit('closeCurrentPage');
              this.$message.success(`${this.opText}计划成功!`);
              if (!this.editMode) {
                this.npi = { ...DATA_TMP };
              }
            })
            .catch((err) => {
              console.log(err);
            })
            .finally(() => {
              this.posting = false;
            });
        });
      },
    },
  };
</script>
